<template>
	<view class="page" style="padding-bottom: 20rpx;">
		<topVue title="额度明细"></topVue>
		<view class="item margin20" v-for="(item, index) in list" :key="index" @click="$tools.route('./subsidyRecord', item.orderId)">
			<view class="flex-between align-center">
				<text style="color: #4B5563; line-height: 1;">订单号：{{ item.no }}</text>
				<view class="type" :class="{typeActive: item.orderType==='首购单'}">{{ item.orderType }}</view>
			</view>
			<view class="flex-between align-center margin20">
				<text style="color: #111827; line-height: 1;">订单金额</text>
				<text style="color: #1CC289; line-height: 1; font-weight: 600; font-size: 32rpx;">{{ item.listAmount/100 }}</text>
			</view>
			<view class="inner margin20">
				<view class="flex align-center">
					<image src="../../static/person/case.png" style="width: 32rpx; height: 28rpx;"></image>
					<text style="color: #111827; line-height: 1; padding-left: 15rpx; font-weight: 600; font-size: 30rpx;">额度</text>
				</view>
				<view class="flex margin30">
					<view class="flex-column w33 align-center">
						<text style="color: #6B7280; line-height: 1;">分享补贴额度</text>
						<u-gap height="20"></u-gap>
						<text style="color: #111827; line-height: 1; font-weight: 600;">{{ item.consumptionSubsidyAmount/100 }}</text>
					</view>
					<view class="flex-column w33 align-center">
						<text style="color: #6B7280; line-height: 1;">已用额度</text>
						<u-gap height="20"></u-gap>
						<text style="color: #111827; line-height: 1; font-weight: 600;">{{ item.alreadyConsumptionSubsidy/100 }}</text>
					</view>
					<view class="flex-column w33 align-center"> 
						<text style="color: #6B7280; line-height: 1;">剩余额度</text>
						<u-gap height="20"></u-gap>
						<text style="color: #111827; line-height: 1; font-weight: 600;">{{ item.remainingConsumptionSubsidy/100 }}</text>
					</view>
				</view>
				<view class="flex margin30" v-if="item.orderType==='首购单'">
					<view class="flex-column w33 align-center">
						<text style="color: #6B7280; line-height: 1;">消费补贴额度</text>
						<u-gap height="20"></u-gap>
						<text style="color: #111827; line-height: 1; font-weight: 600;">{{ item.shareCredits/100 }}</text>
					</view>
					<view class="flex-column w33 align-center">
						<text style="color: #6B7280; line-height: 1;">已用额度</text>
						<u-gap height="20"></u-gap>
						<text style="color: #111827; line-height: 1; font-weight: 600;">{{ item.alreadyShareCredits/100 }}</text>
					</view>
					<view class="flex-column w33 align-center"> 
						<text style="color: #6B7280; line-height: 1;">剩余额度</text>
						<u-gap height="20"></u-gap>
						<text style="color: #111827; line-height: 1; font-weight: 600;">{{ item.remainingShareCredits/100 }}</text>
					</view>
				</view>
			</view>
			<view class="flex align-center margin30">
				<image src="../../static/person/time.png" style="width: 36rpx; height: 36rpx;"></image>
				<text style="line-height: 1; color: #6B7280; padding-left: 20rpx;">{{ item.invitationTime |formatTime("YMDHMS") }}</text>
			</view>
		</view>
		
		<empty text="额度明细列表为空" v-if="isEmpty"></empty>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		data(){
			return {
				list: [],
				pageNum: 1,
				pageSize: 10,
				pages: 0,
				isEmpty: false
			}
		},
		async mounted() {
			await this.getList()
		},
		computed: {
			...mapState({
				user: state => state.user,
			})
		},
		
		onReachBottom() {
			if(this.pageNum===this.pages) return
			this.pageNum++
			this.getList()
		},
		
		methods: {
			async getList(){
				const res = await this.$request("/app-api/pay/wallet-transaction/getSubsidiesDetails", "GET", {
					userId: this.user.id,
					pageNo: this.pageNum,
					pageSize: this.pageSize
				})
				if(res.code===0) {
					this.list = this.list.concat(res.data.list)
					this.pages = Math.ceil(res.data.total/this.pageSize)
					this.isEmpty = this.list.length===0
					console.log("额度明细", this.list)
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.item {
		width: 690rpx;
		background: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
		.type {
			width: 106rpx;
			height: 58rpx;
			background: rgba(96, 165, 250, 0.1);
			border-radius: 20rpx;
			line-height: 56rpx;
			text-align: center;
			color: #60A5FA;
		}
		.typeActive {
			background: rgba(28, 194, 137, 0.1);
			color: rgba(28, 194, 137, 1);
		}
		.inner {
			width: 100%;
			padding: 20rpx;
			background: #F9FAFB;
		}
	}
</style>